<script setup lang="ts">
import { ref } from "vue";
import Sortable from "sortablejs"
import { FileSelector, Dropzone, DialogButton } from "vue3-file-selector";
const dialog = useDialog();
const message = useMessage();
const form = ref({
  columns: 1,
  rows: 2,
});
const columnOptions = ref<any>([]);
const rowOptions = ref<any>([]);
const files = ref<any[]>([]);

const init = () => {
  for (let i = 0; i < 10; i++) {
    columnOptions.value.push({
      label: `一页${i + 1}列`,
      value: i + 1,
    });
    rowOptions.value.push({
      label: `一页${i + 1}行`,
      value: i + 1,
    });
  }
};
init();
const handleClick = async () => {
  const paths = files.value.map((file) => file.path);
  if (paths.length == 0) {
    message.info("请选择pdf文件");
    return;
  }
  console.log(paths);
  const result = await window.native.mergePDFs({
    filePaths: paths,
    columns: form.value.columns,
    rows: form.value.rows,
  });
  if (result.success) {
    dialog.success({
      title: "提示",
      content: `合并完成：${result.path}`,
      positiveText: "确认",
    });
  } else {
    dialog.warning({
      title: "提示",
      content: `合并完失败：${result.message}`,
      positiveText: "确认",
    });
  }
};
const handleRemove = (index: number) => {
  files.value.splice(index, 1);
};
const handleClear = () => {
  files.value = [];
};
// 使用SortableJS实现拖拽排序
const fileListRef = ref<HTMLElement | null>(null);

onMounted(() => {
  if (fileListRef.value) {
    Sortable.create(fileListRef.value, {
      animation: 150,
      onEnd: (evt: any) => {
        const movedItem = files.value.splice(evt.oldIndex!, 1)[0];
        files.value.splice(evt.newIndex!, 0, movedItem);
      },
    });
  }
});
</script>

<template>
  <div class="h-full container mx-auto flex flex-col items-center">
    <!-- 头部 -->
    <n-card class="h-30 w-full">
      <div class="h-full w-full flex items-center justify-center">
        <n-form
          ref="formRef"
          inline
          label-width="auto"
          :model="form"
          label-placement="left"
        >
          <n-form-item label="列数:" path="user.name">
            <n-select
              class="w-30"
              v-model:value="form.columns"
              :options="columnOptions"
            />
          </n-form-item>
          <n-form-item label="行数:" path="user.name">
            <n-select
              class="w-30"
              v-model:value="form.rows"
              :options="rowOptions"
            />
          </n-form-item>
        </n-form>
      </div>
    </n-card>
    <!-- 内容 -->
    <div class="flex-1 w-full relative">
      <file-selector v-model="files">
        <dropzone>
          <div
            class="h-full w-full flex flex-col items-center absolute top-0 left:0 overflow-hidden border-4 border-indigo-200 border-t-indigo-500"
          >
            <ul ref="fileListRef" class="h-full space-y-1 p-2 w-full overflow-y-auto scroll">
              <li
                v-for="(file, i) in files"
                :key="file.name"
                class="flex justify-between items-center bg-gray-50 my-1 rounded px-2 py-1 cursor-pointer"
              >
                {{ file.name }}
                <span
                  class="text-red-500 cursor-pointer"
                  @click.stop="() => handleRemove(i)"
                  >删除</span
                >
              </li>
            </ul>
            <dialog-button
              hover:bg-indigo-400
              cursor-pointer
              w-200
              h-15
              bg-indigo-300
              rounded
              text-white
              px-2
              py-1
            >
              拖动pdf文件至该位置或点击选择pdf文件
            </dialog-button>
          </div>
        </dropzone>
      </file-selector>
    </div>
    <!-- 底部 -->
    <n-card class="h-30">
      <div class="h-full w-full flex items-center justify-center">
        <n-button
          class="h-12 w-100 hover:bg-indigo-500 mr-2"
          type="primary"
          round
          strong
          secondary
          @click.stop="handleClear"
        >
          一键清除
        </n-button>
        <n-button
          class="h-12 w-100 hover:bg-indigo-500 ml-2"
          type="primary"
          round
          @click.stop="handleClick"
        >
          开始合并
        </n-button>
      </div>
    </n-card>
  </div>
</template>
